//################################
// 版权所有：鸽子游戏俱乐部
// 系统名称：鸽子游戏俱乐部-移动版
// 文件名称：rentpage.js
// 创建时间：2017年05月24日
// 创建人员：Lemo
// 功能说明：app第一页：租借
//################################

'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TextInput,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
} from 'react-native';

import Button from '../../components/button';
import Colors from '../../common/colors';
import Images from '../../images';
import Routes from '../../common/routes';
import FontSizes from '../../common/fontSizes';

import FirstPageRentContainer from '../containers/firstPageRentContainer';
import FirstPageCartContainer from '../containers/firstPageCartContainer';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class RentPage extends Component {
    constructor(props) {
        super(props);

        this.onChangeKeyWord = this.onChangeKeyWordFunc.bind(this);

        this.searchgame = this.searchgameFunc.bind(this);

        this.showdropdown = this.showdropdownFunc.bind(this);

        this.state = {
            gametype: 'PS4',
            keyword: null,
            selectedType: 'PS4',
            selectedOrder: '综合排序',
            
            dropdowntype: 'game',
            showdropdown: false,
        };
    }

    componentDidMount() {
        
    }
    
    onChangeKeyWordFunc(ktxt){
        this.setState({keyword: ktxt});
    }

    onPressChangeTypeFunc(type){
        this.setState({gametype: type});
    }

    nextStep(){
        const {navigatorRoot} = this.props;
        InteractionManager.runAfterInteractions(()=>{
            navigatorRoot.push({
                name: Routes.FIRST_CART,
                component: FirstPageCartContainer,
                friend: true,
            });
        });
    }

    searchgameFunc(){
        alert('搜索~');
    }

    showdropdownFunc(dropdowntype){
        if (dropdowntype == this.state.dropdowntype) {
            this.setState({
                showdropdown: !this.state.showdropdown,
                dropdowntype: dropdowntype
            });
        } else {
            this.setState({
                showdropdown: true,
                dropdowntype: dropdowntype
            });
        }
    }

    _rowselected(txt) {
        this.setState({
            selectedType: txt,
            showdropdown: false
        });
    }

    _orderselected(txt) {
        this.setState({
            selectedOrder: txt,
            showdropdown: false
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{height:40,paddingLeft:10,paddingRight:10,alignItems:'center',borderBottomWidth:0.6,borderBottomColor:Colors.mySplitter,flex:1,flexDirection:'row'}}>
                    <TextInput 
                        style={styles.searchinput}
                        placeholder={'搜索'}
                        value = {this.state.keyword}
                        maxLength={10}
                        returnKeyType={'search'}
                        underlineColorAndroid={'transparent'}
                        autoCapitalize={'none'}
                        autoCorrect={false}
                        onChangeText={this.onChangeKeyWord}/>
                    <TouchableOpacity onPress={this.searchgame} style={{padding:4,width:60,alignItems:'center',justifyContent:'center'}}>
                        <Text style={{fontSize:12,color:'#999999'}} >{'搜索'}</Text>
                    </TouchableOpacity>
                </View>

                <View style={{height:40,alignItems:'center',borderBottomWidth:0.6,borderBottomColor:Colors.mySplitter,flexDirection:'row'}}>
                    
                    <View style={{marginLeft:2,marginRight:2,flexDirection:'row'}}>
                        <TouchableOpacity onPress={()=>{this.showdropdownFunc('game')}} style={styles.selectinput}>
                            <Text style={{fontSize:12,color:'#CDCD00'}} >{this.state.selectedType}</Text>
                            {
                            this.state.showdropdown && this.state.dropdowntype=='game' ?
                            <Image source={Images.EmailPrev} style={styles.dropdownicon} resizeMode={Image.resizeMode.contain} />
                            :
                            <Image source={Images.EmailNext} style={styles.dropdownicon} resizeMode={Image.resizeMode.contain} />
                            }
                        </TouchableOpacity>
                    </View>
                    <View style={{width:0.6,borderWidth:0.3,height:38,borderColor:Colors.mySplitter}}></View>

                    <View style={{marginLeft:2,marginRight:2,flexDirection:'row'}}>
                        <TouchableOpacity onPress={()=>{this.showdropdownFunc('order')}} style={styles.selectinput}>
                            <Text style={{fontSize:12,color:'#CDCD00'}} >{this.state.selectedOrder}</Text>
                            {
                            this.state.showdropdown && this.state.dropdowntype=='order' ?
                            <Image source={Images.EmailPrev} style={styles.dropdownicon} resizeMode={Image.resizeMode.contain} />
                            :
                            <Image source={Images.EmailNext} style={styles.dropdownicon} resizeMode={Image.resizeMode.contain} />
                            }
                        </TouchableOpacity>
                    </View>
                    <View style={{width:0.6,borderWidth:0.3,height:38,borderColor:Colors.mySplitter}}></View>

                    <View style={{marginLeft:60,flexDirection:'row'}}>
                        <TouchableOpacity style={{width:80,borderRadius:3,paddingTop:6,paddingBottom:6,backgroundColor:'#37B9D0',alignItems:'center'}} onPress={()=>{this.nextStep()}}>
                            <Text style={{color:'#FFFFFF'}}>{'购物车'}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                
                <View style={{height:30,paddingLeft:15,paddingRight:15,justifyContent:'center',borderBottomWidth:0.6,borderBottomColor:Colors.mySplitter}}><Text style={{fontSize:12}}>{'还可以租借'}{'2'}{'个游戏，升级会员可增加租借数量。'}</Text></View>
                
                <View style={{height:WINDOW_HEIGHT-260}}>
                    <FirstPageRentContainer {...this.props} gameType={this.state.gametype}/>
                </View>
                    
                {
                    this.state.showdropdown ?
                    <View style={{flex:1,height:WINDOW_HEIGHT,backgroundColor:'rgba(0,0,0,0.5)',position:'absolute',top:110,left:0,}}>
                        {this.state.dropdowntype == 'game' ?
                        <View style={styles.block}>
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._rowselected('PS4')}}><Text>{'PS4'}</Text></TouchableOpacity>
                            <View style={styles.middlersplitter} />
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._rowselected('XBOX')}}><Text>{'XBOX'}</Text></TouchableOpacity>
                            <View style={styles.middlersplitter} />
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._rowselected('PSV')}}><Text>{'PSV'}</Text></TouchableOpacity>
                            <View style={styles.middlersplitter} />
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._rowselected('MALL')}}><Text>{'MALL'}</Text></TouchableOpacity>
                        </View>
                        :
                        <View style={styles.block}>
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._orderselected('综合排序')}}><Text>{'综合排序'}</Text></TouchableOpacity>
                            <View style={styles.middlersplitter} />
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._orderselected('租借次数')}}><Text>{'租借次数'}</Text></TouchableOpacity>
                            <View style={styles.middlersplitter} />
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._orderselected('游戏名称')}}><Text>{'游戏名称'}</Text></TouchableOpacity>
                            <View style={styles.middlersplitter} />
                            <TouchableOpacity style={styles.dropdownrow} onPress={()=>{this._orderselected('游戏库存')}}><Text>{'游戏库存'}</Text></TouchableOpacity>
                        </View>
                        }
                    </View>
                    :null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.appBackground,
    },
    searchinput: {
        flex:1,
        borderWidth: 0.6,
        borderColor: '#999999',
        borderRadius: 5,
        height: 28,
        fontSize: 12,
        marginLeft: 10,
        padding: 1,
        paddingLeft: 5,
        justifyContent:'center',
    },
    selectinput: {
        width: 100,
        height: 28,
        padding: 1,
        paddingLeft: 5,
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'center',
    },
    dropdownicon: {
        marginLeft: 4,
        width: 16,
        height: 16,
    },

    block: {
        width: WINDOW_WIDTH,
        backgroundColor: 'white',
    },
    dropdownrow: {
        padding: 10,
        paddingLeft: 15,
    },
    middlersplitter: {
        marginLeft: 15,
        borderColor: Colors.mySplitter,
        borderWidth: 0.3,
    },
});

export default RentPage;